<template>
  <view class="container">
    <!-- 顶部可滚动区域 -->
    <scroll-view class="scroll-content" scroll-y="true" style="background-color: #F6F3F4;">
      <view class="image-container">
        <!-- 这里可以放你的图片，比如 22.jpg -->
        <image src="https://bilet.adaxtv.com/uploads/images/b4df906e5d017dc3ea7c9ba83b981063.jpeg" class="image"></image>
      </view>
	  
      <view style="background-color: #F6F3F4;position: relative;top: -30rpx;border-radius: 30rpx;height: 180rpx;">
		  <view class="info" style="background-color: white;justify-content: start; display: flex;flex-direction: row;border-radius: 30rpx;margin-left: 30rpx;
		  margin-right: 30rpx;z-index: 9999;align-items: center;height: 160rpx;" >
		    <image src="https://bilet.adaxtv.com/uploads/images/e85a147ec0f57a37ba80bde76f814ea2.jpg"
		  		style="width: 185rpx ;height: 285rpx;border-radius: 30rpx;position: relative;top: -80rpx;" mode="aspectFill"> </image>
		  		<view class="title" style="margin-left: 30rpx;padding-bottom: 100rpx;line-height: 60rpx;">赛里木湖音乐节</view>
		  </view>
	  </view>
	  <view style="background-color: white;border-radius: 30rpx;margin: 30rpx;display: flex;flex-direction: column;">
		  <view style="display: flex;flex-direction: row;padding: 30rpx;">
				<uni-tag size="small" text="不支持选座"  style="margin-right: 30rpx" :inverted="true" type="primary" ></uni-tag>
				<uni-tag size="small" text="不支持选座" style="margin-right: 30rpx" :inverted="true" type="primary" ></uni-tag>
				<uni-tag size="small" text="不支持选座" style="margin-right: 30rpx" :inverted="true" type="primary" ></uni-tag>
		  </view>
		  <view style="background-color: #F6F3F4;height: 1rpx;width: 100%;"></view>
		  <view style="display: flex;flex-direction: row;padding: 30rpx;;justify-content: space-between">
			  <view style="display: flex;flex-direction: column;justify-content: space-between">
				  <view>赛里木湖景区天鹅了谁</view>
				  <view>天山区延安路3912号</view>
			  </view>
				<view style="display: flex;flex-direction: row">
					<view style="display: flex;flex-direction: column;align-items: center;">
						<uni-icons type="search" size="50rpx"></uni-icons>
						<view>座位图</view>
												  
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;margin-left: 30rpx;">
					<uni-icons type="search" size="50rpx"></uni-icons>
					<view>导航</view>
				</view>
										  
			</view>  
		  </view>
	  </view>
    </scroll-view>

    <!-- 底部固定按钮区域 -->
    <view class="fixed-footer">
      <button type="default" class="footer-button">订单</button>
      <button type="default" class="footer-button">客服</button>
      <button type="primary" class="footer-button">未开售</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.scroll-content {
  flex: 1;
  overflow-y: scroll;
}

.image-container {
  width: 100%;
  height: 200px;
}

.image {
  width: 100%;
  height: 100%;
}

.info {
  padding: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.location {
  font-size: 16px;
  margin-bottom: 10px;
}

.details {
  font-size: 14px;
}

.fixed-footer {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.footer-button {
  flex: 1;
  margin: 0 5px;
}
</style>
